import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
import Stats from 'three/examples/jsm/libs/stats.module.js'
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";
import {TWEEN} from "three/examples/jsm/libs/tween.module.min.js";
import '../../css/base.css'
import {baseUrl} from '../../js/base.js'

let nowLookModel = {x: 0, y: 0, z: 0}; // 当前位置
let scene, camera, renderer, orbitControls, state = new Stats(), // 场景、相机、加载器、控制器、性能检测器
  raycaster = new THREE.Raycaster(), mouse = new THREE.Vector2(), container = {}; // 射线、鼠标或触摸位置、容器大小
let isMove = false;

function initCamera() {
  camera = new THREE.PerspectiveCamera(90, container.aspect, 0.1, 1000);
  // camera.position.setY(100)
} // 初始化相机
function initScene() {
  scene = new THREE.Scene();
  scene.position.set(...Object.values(nowLookModel))
} // 初始化场景
function initRenderer() {
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(container.w, container.h);
  $id('container').appendChild(renderer.domElement);
} // 初始化渲染器
function initControls() {
  orbitControls = new OrbitControls(camera, renderer.domElement);
  orbitControls.target.set(0, 0, 0.01)
} // 初始化控制器
function initLight() {
  let ambientLight = new THREE.AmbientLight(0xffffff, 1);
  ambientLight.position.set(200, 200, 0);
  scene.add(ambientLight);
  let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(200, 200, 0);
  scene.add(directionalLight);
} // 初始化灯光
function initModel() {
  let gltfLoader = new GLTFLoader();
  let imageLoader = new THREE.TextureLoader();
  let texture = imageLoader.load(`${baseUrl}static/images/floor.jpeg`)
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(100, 100);
  const setTexture = (children) => {
    if (children.type === 'Group') {
      children.children.map((child) => {
        setTexture(child)
      })
    } else if (children.type === "Mesh") {
      children.children.map((child) => {
        test(child)
      })
      if (children.material) {
        if (children.material.length > 1) {
          children.material.forEach((material, index) => {
            children.material[index] = new MeshBasicMaterial({map: texture})
          })
        } else {
          children.material.map = new MeshBasicMaterial({map: texture})
        }
      }
    }
  } // 递归贴图
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath(`${baseUrl}static/examples/js/libs/draco/`);
  gltfLoader.setDRACOLoader(dracoLoader);
  gltfLoader.load(`${baseUrl}static/models/no-d.glb`, function (gltf) {
    gltf = gltf.scene
    gltf.position.setY(-6.2)
    gltf.name = 'gltf'
    setTexture(gltf.children)
    scene.add(gltf);
  })

} // 初始化模型
function initHelper() {
  $id('container').appendChild(state.domElement)
} // 初始化辅助线
function onWindowResize() {
  setContainerSize()
  camera.aspect = container.aspect;
  camera.updateProjectionMatrix();
  renderer.setSize(container.w, container.h);
} // 调整窗口大小
function animate() {
  requestAnimationFrame(animate);
  render()
  state.update()
} //动画
function render() {
  orbitControls.update();
  scene.position.set(...Object.values(nowLookModel))
  renderer.render(scene, camera);
  TWEEN.update()
} //渲染
function onDown(event) {
  setMouseXYZ(event)
  isMove = false
} // 按下
function onMove(event) {
  setMouseXYZ(event)
} // 移动
function onUp(event) {
  setMouseXYZ(event)
  if (!isMove) {
    raycaster.setFromCamera(mouse, camera);
    let intersectObjects = raycaster.intersectObject(scene.getObjectByName('gltf'), true);
    console.log(intersectObjects);
    let move = raycaster.intersectObject(scene.getObjectByName('gltf'), true);
    let hot = raycaster.intersectObject(scene.getObjectByName('gltf'), true);
    if (hot[0] && hot[0].object.name.indexOf('热点') !== -1) {
      alert(hot[0].object.name)
    } else if (move[0]) {
      new TWEEN.Tween(nowLookModel).to({
        x: nowLookModel.x - move[0].point.x,
        z: nowLookModel.z - move[0].point.z,
      }, 300).start();
    }
  }
} // 弹起
function addEL() {
  window.addEventListener('resize', onWindowResize, false);

  $id().addEventListener('mousedown', onDown, false);
  $id().addEventListener('mousemove', onMove, false);
  $id().addEventListener('mouseup', onUp, false);
} //添加监听器
function setMouseXYZ(event) {
  event.preventDefault();
  if (Math.abs(event.movementX) > 1 || Math.abs(event.movementY) > 1) {
    mouse.x = (event.offsetX / $id().offsetWidth) * 2 - 1;
    mouse.y = -(event.offsetY / $id().offsetHeight) * 2 + 1;
    isMove = true
  } // 处理点击的时候可能会移动的误差
}// 设置mouse的坐标
function setContainerSize() {
  container.w = window.innerWidth
  container.h = window.innerHeight
  container.aspect = window.innerWidth / window.innerHeight
} // 获取容器大小并设置给container
(function main() {
  setContainerSize() // 打开的窗口容器大小
  initCamera(); // 初始化相机
  initScene(); // 初始化场景
  initRenderer(); // 初始化渲染器
  initControls(); // 初始化控制器
  initLight(); // 初始化灯光
  initHelper(); // 初始化辅助线
  initModel(); // 初始化模型
  addEL(); // 添加监听器
  animate(); // 动画
})() // 方法运行的main函数
function $id(id) {
  return !id ? renderer.domElement : document.getElementById(id);
} // 获取画布或者根据id获取document对象
